console.log('我是main.js')

let n = 1
getPage.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', `/page${n + 1}.json`)
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            console.log(request.response)
            const array = JSON.parse(request.response)
            array.forEach(item => {
                const li = document.createElement('li')
                li.textContent = item.id
                pg.appendChild(li)

            });
            n += 1
        }
    }
    request.send()
}

getJSON.onclick = () => {
    const request = new XMLHttpRequest()
    request.open("GET", "/5.json")
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            console.log(request.response)
            const object = JSON.parse(request.response)
            // 将符合要求的json 转换为js 对象
            myName.textContent = object.name
            console.log(object)
        }
    }
    request.send()
}

getXML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open("GET", "/4.xml")
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === 200) {
            const dom = request.responseXML
            const text = dom.getElementsByTagName('warning')[0].textContent
            console.log(text.trim())
        }
    }
    request.send()
}

getHTML.onclick = () => {
    const request = new XMLHttpRequest()
    request.open('GET', '/3.html')
    request.onload = () => {
        console.log(request.response)
        // 创建div 标签
        const div = document.createElement('div')
        // 填写div 内容
        div.innerHTML = request.response
        // 插入body 中
        document.body.appendChild(div)
    }

    request.onerror = () => {

    }

    request.send()
}

getJS.onclick = () => {
    const request = new XMLHttpRequest
    request.open('GET', '/2.js')
    request.onload = () => {
        console.log(request.response)
        // 创建script 标签
        const script = document.createElement('script')
        // 填写script 标签内容
        script.innerHTML = request.response
        // 插入body 中
        document.body.appendChild(script)
    }
    request.onerror = () => { }
    request.send()
}

getCSS.onclick = () => {
    const request = new XMLHttpRequest
    request.open('GET', '/style.css')   // readyState = 1
    // open一般只传两个参数

    request.onreadystatechange = () => {
        // console.log('请求成功')
        console.log(request.readyState)
        if (request.readyState === 4) {
            // 下载完成，但是不知道响应编码是什么（2xx还是4xx/5xx）
            if (request.status >= 200 && request.status < 300) {
                console.log('下载完成')
                // 创建style 标签
                const style = document.createElement('style')
                // 写入style 标签的内容
                style.innerHTML = request.response
                // 插入到head 中
                document.head.appendChild(style)
            } else {
                alert('加载css 失败')
            }
            // console.log(request.status)
        }
    }
    request.send()
}
